<template>
	<view class="drawer-wrap" :class="show && 'show'" v-focusable @onFocus="onFocus" @onBlur="onBlur">
		
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const show = ref(false);
	function onFocus () {
		show.value = true;
	}
	function onBlur() {
		show.value = false;
	}
</script>

<style lang="scss">
.drawer {
	&-wrap {
		position: fixed;
		z-index: 999;
		top: 0;
		bottom: 0;
		width: 0;
		background: #434462;
		// display: none;
		transition: width 0.3s;
		&.show {
			width: 300upx;
			// display: block;
		}
	}
}
</style>
